<template>
  <div class="nav_outer">
    <Header>申请提现</Header>
    <div class="content">
      <div class="choosedcard flex_auto">
          <div class="banklogo">
              <img src="../assets/img/jiansheyinhang@2x.png" alt="">
          </div>
          <div class="card_account">
              <h5>中国建设银行</h5>
              <p>**** **** **** **** 1234</p>
          </div>
          <span class="mui-icon mui-icon-arrowright"></span>
      </div>
      <div class="cashcount">
          <h5>提现金额</h5>
          <div class="account flex_auto">
                <span>¥</span>
                <input type="text" name="cashnum" v-model="money">
            </div>
            <div class="remain">
                当前可提现金额{{parseFloat(account.money || 0).toFixed(2)}}元
            </div>
      </div>
      <div class="ensure_btn" @click="transout">
          确认提现
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {
      money: '',
      loading: false,
      account:{}
    }
  },
  created() {
    this.loadAccount();
  },
  methods: {
    transout(){
      if(this.loading){
        return
      }
      if(!this.money){
        this.mui.toast('请输入提现金额');
        return
      }
      if(this.money>this.account.money){
        this.mui.toast('提现金额不能大于账户余额');
        return
      }
      this.loading = true;
      this.Http2.jsonpost("/mobile/myaccount/withdraw", JSON.stringify({
        money: this.money,
        userId: localStorage.getItem('uid')
      })).then(res => {
        this.mui.toast('提现成功');
        this.$router.back();
        this.loading = false;
      },err=>{
        this.loading = false;
      });
    },
    loadAccount(){
      let userId = localStorage.getItem('uid');
      this.Http2.get(`/mobile/myaccount/myAccount/${userId}`, null).then(
        res => {
            this.account = res
        }
      );
    }
  },
  components: {
      Header
  }
}
</script>

<style lang='scss' scoped>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  .content{
      .choosedcard{
          margin-top: px2em(24);
          background: #fff;
          padding: px2em(22);
          img{
              width: px2em(80);
              margin: 0 px2em(40) 0 px2em(50);
          }
          .card_account{
              flex: 1;
              >h5{
                  color: #333;
              }
              >p{
                  margin-bottom: 0;
                  color: #333;
              }
          }
      }
      .cashcount{
          margin: px2em(32);
          background: #fff;
          border-radius: 5px;
          >h5{
              padding: px2em(58) px2em(58) 0;
              color: #333;
          }
          .account{
            font-size: 2em;
            padding: px2em(30) px2em(56);
              >input{
                  flex: 1;
              }
          }
          .remain{
              margin: 0 px2em(25);
              padding: px2em(22);
              border-top: 1px solid #DEDEDE;
              color: #999;
          }
      }
      .ensure_btn{
          height: px2em(80);
        line-height: px2em(80);
        border-radius: px2em(40);
        text-align: center;
        background: #4F7DF6;
        color: #fff;
        margin: px2em(30);
      }
  }
</style>